<template>
  <!-- 查询行 -->
  <p class="You">
    <label for="">商品编号</label>
    <input type="text" placeholder="全部订单" />
    <label for="">商品名称</label>
    <input type="text" v-model="InputSure" />
    <button @click="clickRest">重置</button>
    <button @click="handelClick">新增商品</button>
    <button @click="handelSure">确定</button>
  </p>
  <!-- 蓝色标题行 -->
  <div class="MStitle">
    <span class="MSid">编号</span>
    <span class="name">名称</span>
    <span class="goods">供应商</span>
    <span class="startTime">销售价格</span>
    <span class="endTime">运费</span>
    <span class="MSprice">活动类型</span>
    <span class="XJprice">操作</span>
  </div>
  <div v-for="item in listAdd" :key="item.goodsId" class="numData">
    <input type="checkbox" />
    <div
      class="titleActive11"
      :class="Number(item.goodsId) % 2 !== 0 ? 'active1' : 'active2'"
    >
      <!-- 商品Id -->
      <span class="cityID">{{ item.goodsId }}</span>
      <!-- 名称 -->
      <span class="cityName">{{ item.name }}</span>
      <!-- 供应商 -->
      <span class="supplierName">{{ item.goodsName }}</span>
      <!-- 现价 -->
      <span class="Price">{{ item.goodsSale }}</span>
      <!-- 运费 -->
      <span class="freight">{{ item.code }}</span>
      <span class="type618"
        ><span v-if="item.goodsSale % 2 === 0">打折促销</span>
        <span v-else>618大促</span></span
      >
      <span @click="handelQuery(item.goodsId)" class="Xiugai">修改</span>

      <el-popconfirm
        title="你确定要删除吗?"
        @confirm="confirmEvent(item.goodsId)"
      >
        <template #reference>
          <el-button confirm="fn2">删除</el-button>
        </template>
      </el-popconfirm>
      <span>确定</span>
    </div>
  </div>
  <div class="pages1">
    <el-pagination
      small
      background
      :total="150"
      class="mt-4"
      @current-change="fn"
    />
  </div>
  <Dialog v-model="dialogVisible" @add="Reverse" :resQuery="queryInput" />
</template>

<script lang="ts">
import { ref, onMounted } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import Mock from "@/mock/Data";
import Dialog from "./Dialog.vue";

export default {
  setup() {
    const listAdd = ref([]);
    const router = useRouter();

    // 点击修改
    const queryInput = ref();
    const dialogVisible = ref(false);
    const handelQuery = (id: number) => {
      dialogVisible.value = !dialogVisible.value;
      queryInput.value = id;
      console.log(queryInput.value);
    };

    // 查询框的绑定
    const InputSure = ref();
    const handelSure = async () => {
      const res1: any = await Mock.queryData({ id: InputSure.value });
      listAdd.value = res1.result;
      InputSure.value = "";
    };

    // 重置按钮
    const clickRest = async () => {
      const res: any = await Mock.AllitemsData({
        page: page.value,
        size: size.value,
      });
      InputSure.value = "";
      listAdd.value = res.result;
    };

    // 点击跳转增加商品页面
    const handelClick = () => {
      router.push("/home/spgl/sp");
    };
    // 分页
    const page = ref(1);
    const size = ref(13);
    // 分页函数
    const fn = async (index: number) => {
      page.value = index;
      const res: any = await Mock.AllitemsData({
        page: page.value,
        size: size.value,
      });
      listAdd.value = res.result;
    };

    // 点击删除按钮
    const confirmEvent = async (id: number) => {
      const res2: any = await Mock.removedData({
        page: page.value,
        size: size.value,
        id: id,
      });

      listAdd.value = res2.result;
    };

    const Reverse = (id: any) => {
      console.log(id);

      listAdd.value = id.result;

      dialogVisible.value = !dialogVisible.value;
    };
    //  请求数据
    onMounted(async () => {
      const res: any = await Mock.AllitemsData({
        page: page.value,
        size: size.value,
      });
      listAdd.value = res.result;
    });

    return {
      Reverse,
      clickRest,
      InputSure,
      listAdd,
      queryInput,
      dialogVisible,
      handelSure,
      fn,
      open,
      handelClick,
      handelQuery,
      confirmEvent,
    };
  },
  components: {
    Dialog,
  },
};
</script>

<style lang="less" scoped>
.Xiugai {
  cursor: pointer;
}

//查询行样式
.You {
  display: flex;
  justify-content: flex-start;
  margin: 30px 0;
  label {
    font-size: 16px;
    color: #555656;
    margin-right: 15px;
    font-weight: 600;
  }
  input {
    width: 150px;
    height: 25px;
    background: #eeeeee;
    border: 0;
    margin-right: 25px;
    border-radius: 5px;
    color: #999999;
    padding-left: 5px;
  }
  button {
    width: 70px;
    height: 30px;
    background: #5f4e72;
    border-radius: 4px;
    color: white;
    border: 0;
    margin-right: 15px;
  }
  button:first-of-type {
    margin-left: 50px;
    // background: #e96c06;
  }
}
//一行标题
.MStitle {
  background: #341a76;
  color: white;
  height: 50px;
  // margin-top: 20px;
  span {
    width: 130px;
    display: inline-block;
    height: 100%;
    font-size: 14px;
    line-height: 50px;
    text-align: center;
  }
  .startTime {
    width: 150px;
  }
  .endTime {
    width: 300px;
  }
}

.numData {
  display: flex;
  align-items: center;
}

// 渲染页面
.titleActive11 {
  display: flex;
  .center();
  span {
    width: 50px;
  }

  // 商品id
  .cityID {
    width: 116px;
  }
  // 名称
  .cityName {
    width: 130px;
  }
  // 供应商
  .supplierName {
    width: 130px;
  }
  // 现价
  .Price {
    width: 142px;
  }
  //运费
  .freight {
    width: 315px;
  }
  .type618 {
    width: 120px;
    margin-right: 43px;
  }
}
// 换行变色
.active1 {
  background-color: #f5f5f5;
}
.active2 {
  background-color: #ffffff;
}
.pages1 {
  float: right;
  margin-top: 15px;
}
</style>
